<template>
    <div class="record-wrapper" :class="position">
        <div class="outcome" >{{moneyType === '-' ? record.category + ': -￥' + record.amount : ''}}</div>
        <div class="icon-wrapper">
            <Icon :name="ownIcon"></Icon>
        </div>
        <div class="income">{{moneyType === '+' ? record.category + ': ￥' + record.amount : ''}}</div>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component, Prop} from 'vue-property-decorator';

    @Component
    export default class Record extends Vue {
        @Prop(Boolean) notFirst: boolean | undefined
        @Prop(Boolean) notLast: boolean | undefined
        @Prop(Object) record: RecordItem | undefined

        get position(): string {
            let pos = ''
            if (this.notFirst) {
                pos += ' not-first'
            }
            if (this.notLast) {
                pos += ' not-last'
            }
            return pos
        }

        get moneyType(): string {
            return this.record!.type
        }

        get moneyCategory(): string {
            return this.record!.category
        }

        get ownIcon(): string {
            const hashMap: {[key: string]: string} = {
                'clothes': '衣服饰品',
                'food': '食品酒水',
                'home': '居家物业',
                'car': '行车交通',
                'phone': '交流通讯',
                'entertainment': '休闲娱乐',
                'study': '学习进修',
                'relationship': '人情往来',
                'hospital': '医疗保健',
                'insurance': '金融保险',
                'otherOutcome': '其他支出',
                'salary': '工资收入',
                'investment': '投资收入',
                'partTime': '兼职收入',
                'redPocket': '红包收入',
                'lucky': '以外收入',
                'otherIncome': '其他收入 '
            }
            let category = 'others'
            Object.keys(hashMap).forEach((key) => {
                if (this.moneyCategory === hashMap[key]) {
                    console.log(key)
                    category = key.trim()
                }
            })
            return category
        }

    }
</script>

<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";

    .record-wrapper {
        display: flex;
        justify-content: center;

        > .income,
        > .outcome{
            width: 40vw;
            text-align: center;
            line-height: 5em;
            z-index: -3;
        }

        > .income {
            color: $color-red;
        }

        > .outcome {
            color: $color-green;
        }

        > .icon-wrapper {
            position: relative;
            > .icon {
                @extend %svg-theme-color;
                width: 1.6em;
                height: 5em;
            }
            &::after {
                content: '';
                height: 2.4em;
                width: 2.4em;
                background: $color-orange;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-top: -1.40em;
                margin-left: -1.3em;
                z-index: -1;
                border-radius: 2.4em;
                background: white;
                border: 0.1em solid $color-orange;
            }
        }

        &.not-last {
            position: relative;
            &::after {
                content: '';
                height: 1.5em;
                width: 2px;
                background: $color-orange;
                position: absolute;
                left: 50vw;
                bottom: 0;
                margin-left: -1px;
                z-index: -2;
            }
        }

        &.not-first {
            position: relative;
            &::before {
                content: '';
                height: 1.5em;
                width: 2px;
                background: $color-orange;
                position: absolute;
                left: 50vw;
                top: 0;
                margin-left: -1px;
                z-index: -2;
            }
        }
    }
</style>